<!-- 待办事项 页面 -->
<template>
	<view class="to-do-list-box">
		<u-sticky><search searchBackgroundColor="#F4F6FA" placeholder="搜索原告" inputBackgroundColor="#FFF" @change="searchChange" @clear="searchClear"></search></u-sticky>
		<!-- 添加待办事项 -->
		<view class="add-to-do-list" @click="addToDoListClick">
			<u-image width="59" height="59" :src="vuex_url + '/static/imgs/todolist.png'"></u-image>
			<view class="text">{{isToDoList ? '添加待办事项' : '添加待开庭'}}</view>
		</view>
		<!-- 待办/已过期 区域 -->
		<u-tabs :list="tabsList" :is-scroll="false" :current="current" height="88" active-color="#00C9B1" inactive-color="#141418" bar-width="80" @change="tabsChange"></u-tabs>

		<block v-if="dataList.length < 1">
			<u-empty text="暂无历史记录" mode="history" margin-top="250"></u-empty>
		</block>
		<block v-else>
			<!-- 数据区域 -->
			<view class="item-box" v-for="item in dataList" :key="item.id" :style="{color: current === 1 ? '#97979F' : ''}" @click="itemClick(item.id)">
				<view class="img-box"><u-image width="52" height="65" :src="vuex_url + '/static/imgs/word.png'"></u-image></view>
				<view>时间：{{item.start_time | getShowTime}}</view>
				<!-- 添加 待办事项 的场景下展示的是 内容 -->
				<view v-if="isToDoList">内容：{{item.content || ''}}</view>
				<!-- 添加 待开庭 的场景下展示的是 地址 -->
				<view v-else>地址：{{item.address}}</view>
				<view class="plaintiff">原告：{{item.plaintiff_name}}</view>
				<view>被告：{{item.defendant_name}}</view>
				<!-- 保全 的标签 -->
				<view class="icon-box" v-if="item.remind">{{item.remind}}</view>
			</view>
		</block>
	</view>
</template>

<script>
export default {
	data() {
		return {
			sortData: {
				page: 1,
				page_size: 999,
				name: '',	// 搜索的原告	被告昵称
				type: 1,	// 1:待开庭 2：已过期
			},
			// 如果用户是点击“待开庭”进入，则此值为 false，是点击“待办事项”进入则此值为 true
			isToDoList: false,
			tabsList: [
				{
					name: '待办'
				},
				{
					name: '已过期'
				}
			],
			current: 0,
			// 根据页面条件动态存储需要展示的列表数据
			dataList: []
		};
	},
	onLoad(options) {
		// 判断用户是从“待开庭”进入还是从“待办事项”进入
		if(options.isToDoList === 'true') {
			this.isToDoList = true		// 从 待办事项 进入
			uni.setNavigationBarTitle({
				title: '待办事项'
			})
			// this.getData()
		} else {
			this.isToDoList = false		// 从 待开庭 进入
			uni.setNavigationBarTitle({
				title: '待开庭'
			})
			this.tabsList[0].name = '待开庭'
		}
		// console.log(this.isToDoList);
		
		// 获取页面数据
		this.getData()
	},
	onShow() {
		// 判断是否需要刷新页面数据
		if(this.vuex_isSubmit) {
			this.getData()
			this.$u.vuex('vuex_isSubmit', false)
		}
	},
	methods: {
		// 获取页面数据(注意后续需要判断是获取待开庭还是待办事项的数据)
		async getData() {
			if(this.isToDoList) {
				// 获取待办事项数据列表
				this.sortData.type = this.current + 1
				const res = await this.$u.api.getTodoListDatas(this.sortData)
				if(!res) return
				this.dataList = res
				return
			}
			this.sortData.type = this.current + 1
			const res = await this.$u.api.getToDoList(this.sortData)
			if(!res) return
			this.dataList = res		// 这里没有使用分页的思路进行设计
			// console.log(this.dataList);
		},
		// tabs 点击切换事件
		tabsChange(index) {
			this.current = index;
			this.getData()
		},
		// 添加 待开庭/待办事项 的点击事件(跳转到添加 待开庭/待办事项 页面)
		addToDoListClick() {
			this.$u.route('/myPackageA/pages/views/add-to-do-item?isToDoList=' + this.isToDoList)
		},
		// 每一项 待开庭/待办事项 的点击事件
		itemClick(id) {
			// 传递过去的 id 是标识数据的，isToDoList 是为了标识来源页面(待开庭和待办事项 都是跳转到此页面)
			this.$u.route(`/myPackageA/pages/views/to-do-item-detail?id=${id}&isToDoList=${this.isToDoList}`)
		},
		// 顶部搜索框的输入事件
		searchChange(value) {
			// console.log(value);
			this.sortData.name = value
			this.sortData.page = 1
			this.getData()
		},
		// 顶部搜索框的内容清除事件
		searchClear() {
			// 重新获取页面数据
			this.getData()	
		}
	},
	filters: {
		// 把后台返回的 2022-03-05 14:00:00 格式的时间转换为 2022年03月05日 14:00 的格式
		getShowTime(time) {
			let str = ''
			if(!time) return
			time = time.replace(/-/, '年').replace(/-/, '月').replace(/ /, '日 ')
			let arr = time.split(' ')
			str = arr[0] + ' ' + arr[1].split(':')[0] + ':' + arr[1].split(':')[1]
			return str
		},
	}
};
</script>

<style lang="scss" scoped>
.to-do-list-box {
	width: 750rpx;
	min-height: 100vh;
	background-color: $u-bg-color;
	.add-to-do-list {
		height: 96rpx;
		background-color: white;
		padding: 18rpx 24rpx;
		display: flex;
		align-items: center;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #141418;
		margin-bottom: 10rpx;
		.text {
			margin-left: 24rpx;
		}
	}
	.item-box {
		min-height: 234rpx;
		background: #ffffff;
		margin-top: 10rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #141418;
		display: flex;
		flex-direction: column;
		padding: 35rpx 95rpx;
		position: relative;
		.img-box {
			width: 52rpx;
			height: 65rpx;
			position: absolute;
			top: 35rpx;
			left: 24rpx;
		}
		.plaintiff {
			margin-top: 20rpx;
		}
		.icon-box {
			width: 59rpx;
			height: 59rpx;
			line-height: 59rpx;
			text-align: center;
			border: 1px solid #00c9b1;
			border-radius: 50%;
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #00c9b1;
			position: absolute;
			top: 19rpx;
			right: 28rpx;
			overflow: hidden;
		}
	}
}
</style>
